<template>
	<view class="parking-container">
		<view class="topBar">
			<view class="topBarL" @click="goAddVisitor()">
				<view class="add">
					<view class="title">				
						<text class="iconfont icon-icon-test13"></text>
						<text>绑定车位</text>
					</view>
					<view class="arr">
						<text class="iconfont icon-icon-test61"></text>
					</view>
				</view>
				<view class="info">
					可凭车位密钥<br/>
					绑定您的车位！
				</view>
			</view>	
			<view class="topBarR">
				<view class="history" @click="goToListPack(0)">
					<view class="title">
						<text class="iconfont icon-icon-test37"></text>
						<text>租用车位</text>
					</view>
					<view class="arr">
						<text class="iconfont icon-icon-test61"></text>
					</view>
				</view>
				<view class="order" @click="goToListPack(1)">
					<view class="title">
						<text class="iconfont icon-icon-test30"></text>
						<text>购买车位</text>
					</view>
					<view class="arr">
						<text class="iconfont icon-icon-test61"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="text-align: center; padding: 20rpx;font-weight: bolder;">
			车位列表
		</view>
		<scroll-view
			scroll-y="true" 
			class="scroll-Y"
			:style="{height:cssheight}">
			<view class="card" v-for="(item,index) in list" :key="item.id">
				<view class="cardTitle">
					<text class="iconfont icon-icon-test21"></text>
					<text>车位编号：{{item.parkingNum}}</text>
				</view>
				<view class="cardInfo">
					<view class="cardL">
						<view class="type">
							<text class="iconfont icon-icon-test29"></text>
							<text>车位类型：</text>
							<text>{{item.parkingType}}</text>
						</view>
						<view class="owner">
							<text class="iconfont icon-icon-test35"></text>
							<text>所有者：</text>
							<text>{{item.parkingOwnerName}}</text>
						</view>
						<view class="rental">
							<text class="iconfont icon-icon-test37"></text>
							<text>承租人：</text>
							<text>{{item.parkingTenantName || '尚未出租'}}</text>
						</view>
					</view>
					<view class="cardR">
						<view class="detailPacking" @click="goToDetailPack(item.id)">
							<view class="">
								<text>查看</text><br>
								<text>详情</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="noData" v-if="noDataShow">
				-- 您还没有车位信息 -- <br>
				-- 您可以绑定车位 --
			</view>
		</scroll-view>
		<fui-dialog
			class="fui-dialog"
			:show="dialog.show" 
			:title="dialog.title" 
			:content="dialog.content" 
			:buttons="dialog.buttons"
			:maskClosable="false" 
			@click="onTap">
			<uni-forms :modelValue="bindInfo">
				<uni-forms-item required label="车位密钥" name="id">
						<uni-easyinput type="text" v-model="bindInfo.packingId" placeholder="请输入车位密钥" />
				</uni-forms-item>
				<uni-forms-item required name="num" label="车位编号">
						<uni-easyinput type="text" v-model="bindInfo.packingNum" placeholder="请输入车位编号" />
				</uni-forms-item>
			</uni-forms>
			<text style="color: #FF2B2B;">{{warn}}</text>
		</fui-dialog>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				warn:'',
				bindInfo: {
					packingId:'',
					packingNum:''
				},
				list: [],
				userInfo:{},
				cssheight:'',
				noDataShow: false,
				dialog: {
					flag: 1,
					show: false,
					title: '绑定车位',
					content: '',
					buttons: [
						{
							text: '取消绑定',
							color: '#FF2B2B'
						},
						{
							text: '确认绑定',
							color: '#465CFF'
						}
					],
					submitted: false
				}				
			};
		},
		onReady() {
			var _this = this
			var css = ''
			uni.getSystemInfo({
				success: (resu) => {
					const query = uni.createSelectorQuery()
					query.select('.scroll-Y').boundingClientRect()
					query.exec(function(res){
						_this.height = resu.windowHeight -res[0].top + 'px'
						// console.log(_this.height)
						css = _this.height
					})
				}
			})
			this.cssheight = css
		},
		onLoad() {
			this.getUserInfo()
		},
		methods:{
			onTap(e){
				// console.log(e)
				if(e.index == 1){
					if(this.bindInfo.packingId == '' || this.bindInfo.packingNum == ''){
						// console.log('in')
						this.warn = '信息填写不完整'
						setTimeout(()=>{
							this.warn = ''
						},1000)
					}else{
						this.$myReq({
							url:`/owner/packing/bindPacking/${this.bindInfo.packingId}/${this.bindInfo.packingNum}/${this.userInfo.signKey}`,
							method:'post'
						})
						.then((res) => {
							this.dialog.show = false
							this.getPackingList(this.userInfo.signKey)
							uni.showToast({
								title:'绑定成功',
								image:'../../static/Icon/facility/orderSuccess.png',
								position:'top',
								duration:2000
							})
						})
						.catch((err) => {
							this.warn = err.message
						})
					}
				}else{
					this.dialog.show = false
				}
			},
			getPackingList(ownerSignKey){
				this.$myReq({
					url:`/owner/packing/packing/${ownerSignKey}`,
					method:'post'
				})
				.then((res) => {
					this.list = res.data
					if(res.data.length == 0){
						this.noDataShow = true
					}else{
						this.noDataShow = false
					}
				})
			},
			goAddVisitor(){
				this.dialog.show = true
			},
			goToDetailPack(packingId){
				uni.navigateTo({
					url:'detailParking/detailParking?packingId='+packingId
				})
			},
			goToListPack(type){
				uni.navigateTo({
					url:'listParking/listParking?type='+type
				})
			},
			getUserInfo(){
				const token = uni.getStorageSync("userToken")
				// console.log(token)
				this.$myReq({
					url: '/owner/login/loginUserInfo/' + token,
					method:'GET'
				})
				.then((res) => {
					// console.log(res.data.signKey)
					this.userInfo = res.data
					this.getPackingList(res.data.signKey)
				})
			}
		}
	}
</script>

<style lang="scss">
	.topBar{
		padding: 20rpx 30rpx 20rpx 30rpx;
		// border: 1px solid red;
		// 690
		// height: 200rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.topBarL{
			width: 360rpx;
			border-radius: 30rpx;
			background-color: $main-colorB;
			.add{
				padding: 30rpx 35rpx 20rpx 35rpx;
				color: #000000;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				.title{
					// border: 1px solid blue;
					height: 60rpx;
					color: #FFFFFF;
					font-weight: bolder;
					text{
						line-height: 60rpx;
						font-size: 40rpx;
					}
					text:nth-child(1){
						margin-right: 10rpx;
					}
				}
				.arr{
					// border: 1px solid blue;
					height: 60rpx;
					text{
						color: #FFFFFF;
						font-weight: bolder;
						line-height: 60rpx;
						font-size: 40rpx;
					}
				}
			}
			.info{
				padding: 0rpx 35rpx 30rpx 35rpx;
				font-size: 27rpx;
				// border: 1px solid red;
				color: #e1e1e1;
			}
		}
		.topBarR{
			width: 310rpx;
			display: flex;
			flex-flow: column;
			justify-content: space-between;
			// border: 1px solid red;
			// height: 150rpx;
			.history{
				height: 95rpx;
				background-color: #09BE4F;			
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				padding: 0rpx 30rpx;
				align-items: center;
				border-radius: 20rpx;
				.title{
					// border: 1px solid blue;
					height: 60rpx;
					color: #FFFFFF;
					font-weight: bolder;
					text{
						line-height: 60rpx;
						font-size: 30rpx;
					}
					text:nth-child(1){
						margin-right: 10rpx;
					}
				}
				.arr{
					// border: 1px solid blue;
					height: 60rpx;
					text{
						color: #FFFFFF;
						font-weight: bolder;
						line-height: 60rpx;
						font-size: 30rpx;
					}
				}
			}
			.order{
				height: 95rpx;
				background-color: #6831FF;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				padding: 0rpx 30rpx;
				align-items: center;
				border-radius: 20rpx;
				.title{
					// border: 1px solid blue;
					height: 60rpx;
					color: #FFFFFF;
					font-weight: bolder;
					text{
						line-height: 60rpx;
						font-size: 30rpx;
					}
					text:nth-child(1){
						margin-right: 10rpx;
					}
				}
				.arr{
					// border: 1px solid blue;
					height: 60rpx;
					text{
						color: #FFFFFF;
						font-weight: bolder;
						line-height: 60rpx;
						font-size: 30rpx;
					}
				}
			}
		}
	}
	.scroll-Y{
		background-color: #f6f6f6;
		padding: 10rpx 30rpx;
		.card{
			width: 690rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			box-shadow: 2rpx 2rpx 2rpx 3rpx #d9d9d9;
			margin-bottom: 20rpx;
			.cardTitle{
				padding: 20rpx 30rpx;
				height: 50rpx;
				line-height: 50rpx;
				// border: 1px solid red;
				border-bottom: 4rpx solid #f6f6f6;
				text:nth-child(1){
					margin-right: 10rpx;
				}
				text{
					font-size: 35rpx;
				}
			}
			.cardInfo{
				padding: 20rpx 30rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				.cardL{
					// border: 1px solid red;
					view{
						// border: 1px solid red;
						height: 50rpx;
						line-height: 50rpx;
						font-size: 30rpx;
						color: $main-garyB;
						text:nth-child(1){
							margin-right: 10rpx;
						}
					}
				}
				.cardR{
					// border: 1px solid red;
					width: 150rpx;
					display: flex;
					align-items: center;
					.detailPacking{
						width: 130rpx;
						height: 130rpx;
						margin: 0 auto;
						// border: 1px solid green;
						background-color: #67C23A  ;
						border-radius: 20rpx;
						text-align: center;
						display: flex;
						align-items: center;
						view{
							// border: 1px solid green;
							color: #FFFFFF;
							width: 100rpx;
							margin: 0 auto;
						}
					}
				}
			}
		}
		.noData{
			// margin: 0 auto;
			width: 690rpx;
			// border: 1px solid red;
			margin-top: 40rpx;
			margin-bottom: 40rpx;
			text-align: center;
			color: $main-garyB;
		}
	}
	.fui-dialog{

	}
</style>
